<template>
  <div class="box">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <ul>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in list.gallery" :key="item.id">
          <img :src="item.img_url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </ul>
    <img :src="list.info.list_pic_url" alt="" />
    <div class="order">
      <span>30天无忧退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    <div class="desc">
      <p class="top">
        {{ list.info.goods_brief }}
      </p>
      <p class="middle">
        {{ list.info.name }}
      </p>
      <p class="price">￥{{ list.info.retail_price }}</p>
    </div>
    <div class="content" v-html="list.info.goods_desc"></div>
    <van-cell is-link @click="showPopup" position="bottom"
      >请选择规格数量</van-cell
    >
    <van-popup v-model="show" position="bottom">
      <div cartContent>
        <div class="left">
          <van-card
            :price="list.info.retail_price"
            desc="请选择数量"
            :thumb="list.info.primary_pic_url"
          />
          <p>数量</p>
          <van-stepper
            theme="round"
            v-model="value"
            input-width="40px"
            button-size="32px"
          />
        </div>
      </div>
    </van-popup>
    <ul>
      <p>商品参数</p>
      <li v-for="item in list.attribute" :key="item.id">
        <van-cell :title="item.name + ':'" :value="item.value" />
      </li>
    </ul>
    <p>—— 常见问题 ——</p>
    <ul>
      <li v-for="item in list.issue" :key="item.id">
        <van-cell :title="'❤ ' + item.question" :label="item.answer" />
      </li>
    </ul>
    <p>———— 大家都在看 —————</p>

    <van-grid :border="false" :column-num="2" :gutter="8">
      <router-link
        tag="van-grid-item"
        :to="{ path: '/category/detail', query: { id: item.id } }"
        v-for="item in list.productList"
        :key="item.id"
      >
        <van-image :src="item.list_pic_url" />
        <p>{{ item.name }}</p>
        <p class="price">￥{{ item.retail_price }}</p>
      </router-link>
    </van-grid>
    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="list.allnumber"
        @click="GoCart"
      />
      <van-goods-action-icon
        icon="star-o"
        text="收藏"
        :color="list.collected ? 'red' : ''"
        @click="onClickIcon"
      />

      <van-goods-action-button color="#ccc" text="立即购买" />
           <van-goods-action-button
        color="#b4282d"
        text="加入购物车"
        @click="onClick"
      />
      <van-popup v-model="show" position="bottom">
        <div cartContent>
          <div class="left">
            <van-card
              :price="list.info.retail_price"
              desc="请选择数量"
              :thumb="list.info.primary_pic_url"
            />
            <p>数量</p>
            <van-stepper
              theme="round"
              v-model="value"
              input-width="40px"
              button-size="32px"
            />
          </div>
        </div>
      </van-popup> 
    </van-goods-action>
  </div>
</template>

<script>
import { detailaction, addcollect, addCart } from "@/api/category/goodsDetail";
export default {
  data() {
    return {
      list: {},
      show: false,
      value: 1,
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    init() {
      detailaction({
        id: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.list = res;
        // console.log(this.list);
        // this.productList=  res.productList
      });
    },
    async onClickIcon() {
      var res = await addcollect({
        goodsId: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        // console.log(res);
        this.init();
      });
    },
    onClick() {
      if (this.show = true) {
        addCart({
          goodsId: this.$route.query.id,
          number: 2,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          console.log(res);
        });
      } else {
        this.show = !this.show ;
      } this.init();
      // this.show == !this.show;
      // addCart({
      //   goodsId: this.$route.query.id,
      //   number: 2,
      //   openId: localStorage.getItem("openId"),
      // }).then((res) => {
      //   console.log(res);
      //   this.init();
      // });
    },
    GoCart() {
      this.$router.push("/cart");
    },
  },
};
</script>

<style lang="scss">
.box {
  overflow: hidden;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.van-cell__title {
  text-align: -webkit-auto;
}
.van-cell__value {
  text-align: justify;
}
.van-goods-action {
  position: fixed;
  z-index: 3000;
}
.van-popup {
  top: 49%;
  width: 100%;
  height: 41%;
}
.price {
  color: #9c3232;
  font-size: 0.32rem;
}
.desc {
  text-align: center;
  .top {
    font-size: 0.54667rem;
    padding: 0.26667rem;
  }
  .middle {
    margin-bottom: 0.33333rem;
    font-size: 0.32rem;
    color: #999;
  }
  .price {
    margin-top: 0.13333rem;
    font-size: 0.46667rem;
    color: #b4282d;
    font-weight: bolder;
  }
}
img {
  display: block;
  width: 100%;
}
.cartContent {
  display: flex;
  justify-content: space-between;
  .left {
    height: 2.36rem;
    width: 2.36rem;
    margin-right: 0.4rem;
    img {
      display: block;
      width: 100%;
    }
  }
}
.order {
  width: 9.46667rem;
  height: 0.97333rem;
  margin: 0 auto;
  background: #f4f4f4;
  span {
    line-height: 1rem;
    font-size: 0.33333rem;
    color: #666;
    margin-right: 1rem;
  }
}
.van-overlay {
  height: 90%;
}
</style>